<template>
  <div class="page-header-index-wide">
    <a-card :bordered="false">
      <div class="topDataDisplayFlex">
        <div class="topDataDesc">
          <div class="topDataDescPrice">
            <span>￥{{ money || 0 }}</span>
            <!-- <span v-else>****</span> -->
          </div>
          <div class="topDataDescText">账户余额</div>
        </div>
        <div class="topDataDesc">
          <div class="topDataDescPrice">
            <span>￥{{ money || 0 }}</span>
          </div> 
          <div class="topDataDescText">可提现金额</div>
        </div>
        <div class="topDataDesc" style="display: flex; justify-content: center; align-items: center">
          <a-button style="margin-right: 10px" @click="lookCard">银行卡详情</a-button>
          <a-button type="primary" @click="TXVisible = true">提现</a-button>
        </div>
      </div>
    </a-card>
    <div style="margin-top: 20px">
      <div class="account-settings-info-left">
        <a-menu
          mode="horizontal"
          :selectedKeys="selectedKeys"
          type="inner"
          style="padding: 8px 16px 0"
          @openChange="onOpenChange"
        >
          <a-menu-item key="/finance/walletExpand/collection_record" class="border-cantainer">
            <router-link :to="{ name: 'collection_record' }">
              <div class="border_catainer_bottom">收款记录</div>
            </router-link>
          </a-menu-item>
          <!-- /finance/walletExpand/withdrawal_record -->
          <a-menu-item key="/finance/walletExpand/withdrawal_record" class="border-cantainer">
            <router-link :to="{ name: 'withdrawal_record' }">
              <div class="border_catainer_bottom">提现记录</div>
            </router-link>
          </a-menu-item>
        </a-menu>
      </div>
      <div class="account-settings-info-right">
        <!-- <div class="account-settings-info-title"> -->
        <!-- <span>{{ $route.meta.title }}</span> -->
        <!-- </div> -->
        <route-view></route-view>
      </div>
    </div>
    <!-- 银行卡详情 -->
    <a-modal title="银行卡详情" :visible="cardVisible" @cancel="cardVisible = false" :footer="null">
      <div v-if="cardInfo">
        <div class="my-flex">
          <div style="width: 70px">开户人：</div>
          <div>{{ cardInfo.name }}</div>
        </div>
        <div class="my-flex">
          <span style="width: 70px">手机号：</span>
          <span>{{ cardInfo.phone }}</span>
        </div>
        <div class="my-flex">
          <span>开户银行：</span>
          <span>{{ cardInfo.bank }}</span>
        </div>
        <div class="my-flex">
          <span>银行卡号：</span>
          <span>{{ cardInfo.card_num }}</span>
        </div>
      </div>
      <div v-if="!cardInfo">
        <a-empty />
      </div>
      <div style="margin-top: 10px">
        <a-button style="margin-right: 10px" @click="editCard" v-if="!cardInfo">添加银行卡</a-button>
        <a-button type="primary" @click="editCard" v-if="cardInfo">修改银行卡</a-button>
      </div>
    </a-modal>
    <!-- 编辑 增加银行卡 -->
    <a-modal
      :title="cardInfo ? '编辑银行卡' : '增加银行卡'"
      :visible="addVisible"
      :confirm-loading="confirmLoading"
      @ok="addHandleOk"
      @cancel="addVisible = false"
    >
      <div v-if="form.id">
        <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-form-model-item label="开户人：" prop="name">
            <a-input v-model="form.name" placeholder="请输入" />
          </a-form-model-item>
          <a-form-model-item label="手机号：" prop="phone">
            <!-- <a-input-number  v-model="form.phone" placeholder="请输入" /> -->
            <a-input v-model="form.phone" placeholder="请输入" />
          </a-form-model-item>
          <a-form-model-item label="开户银行：" prop="bank">
            <a-input v-model="form.bank" placeholder="请输入" />
          </a-form-model-item>
          <a-form-model-item label="银行卡号：" prop="card_num">
            <!-- <a-input-number  v-model="form.card_num" placeholder="请输入" /> -->
            <a-input v-model="form.card_num" placeholder="请输入" />
          </a-form-model-item>
        </a-form-model>
      </div>
      <div v-else>
        <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-form-model-item label="开户人：" prop="name">
            <a-input v-model="form.name" placeholder="请输入" />
          </a-form-model-item>
          <a-form-model-item label="手机号：" prop="phone">
            <!-- <a-input-number  v-model="form.phone" placeholder="请输入" /> -->
            <a-input v-model="form.phone" placeholder="请输入" />
          </a-form-model-item>
          <a-form-model-item label="开户银行：" prop="bank">
            <a-input v-model="form.bank" placeholder="请输入" />
          </a-form-model-item>
          <a-form-model-item label="银行卡号：" prop="card_num">
            <a-input v-model="form.card_num" placeholder="请输入" />
          </a-form-model-item>
        </a-form-model>
      </div>
    </a-modal>
    <!-- 提现 -->
    <a-modal
      title="提现"
      :visible="TXVisible"
      :confirm-loading="TXConfirmLoading"
      @ok="Withdrawal"
      @cancel="TXVisible = false"
    >
      <a-form-model ref="TXruleForm" :model="TXform" :rules="TXrules" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item label="提现金额：" prop="price">
          <a-input v-model="TXform.price" placeholder="请输入" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import { PageView, RouteView } from '@/layouts'
import { mixinDevice } from '@/utils/mixin.js'
import { getSchoolInfo } from '@/api/organization'
import { bankCards, editCards, delCards, addCards, withdrawalAdd } from '@/api/schoolWallet'
export default {
  components: {
    RouteView,
    PageView,
  },
  mixins: [mixinDevice],
  data() {
    return {
      TXVisible: false,
      TXConfirmLoading: false,
      // horizontal  inline
      mode: 'inline',
      openKeys: [],
      selectedKeys: [],
      money: undefined,
      cardVisible: false,
      cardInfo: undefined,
      addVisible: false,
      confirmLoading: false,
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      form: {
        name: '',
        phone: '',
        bank: '',
        card_num: '',
      },
      rules: {
        name: [
          { required: true, message: '请输入持卡人', trigger: 'blur' },

          // { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          {
            message: '手机号只能是数字',
            pattern: /^\d+$|^\d+[.]?\d+$/,
            trigger: 'blur',
          },
        ],
        bank: [{ required: true, message: '请输入开户银行', trigger: 'blur' }],
        card_num: [
          { required: true, message: '请输入银行卡号', trigger: 'blur' },
          {
            message: '银行卡号只能是数字',
            pattern: /^\d+$|^\d+[.]?\d+$/,
            trigger: 'blur',
          },
        ],
      },
      TXform: {
        price: '',
        school_id: this.$store.state.user.school,
      },
      TXrules: {
        price: [
          { required: true, message: '请输入提现金额', trigger: 'blur' },
          {
            message: '提现金额只能是数字',
            pattern: /^\d+$|^\d+[.]?\d+$/,
            trigger: 'blur',
          },
        ],
      },
    }
  },
  mounted() {
    this.updateMenu()
    this.getMonet()
  },
  methods: {
    // 提现
    Withdrawal() {
      console.log(this.TXform)
      this.$refs.TXruleForm.validate((valid) => {
        if (valid) {
          this.TXConfirmLoading = true
          withdrawalAdd(this.TXform)
            .then((res) => {
              this.$message.success('提现成功')
            })
            .catch((err) => {
              this.$message.error(err.data.message || '提现失败')
            })
            .finally(() => {
              this.TXConfirmLoading = false
            })
        } else {
          this.$message.warning('请按正确格式填写')
          return false
        }
      })
    },
    lookCard() {
      this.cardInfo = undefined
      bankCards({ school_id: this.$store.state.user.school })
        .then((res) => {
          this.cardVisible = true
          if (res) {
            this.cardInfo = res
          }
        })
        .catch((err) => {
          this.$message.error(err.data.message || '获取失败')
        })
    },
    editCard() {
      if (this.cardInfo && this.cardInfo.id) {
        this.form = JSON.parse(JSON.stringify(this.cardInfo))
      }
      this.addVisible = true
    },
    del() {
      delCards(this.cardInfo.id)
    },
    addHandleOk() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.confirmLoading = true
          if (this.cardInfo && this.cardInfo.id) {
            //编辑
            editCards(Object.assign(this.form, { school_id: this.$store.state.user.school }))
              .then((res) => {
                this.cardInfo = res
                this.addVisible = false
                this.$message.success('修改成功')
              })
              .catch((err) => {
                this.$message.error(err.data.message || '修改失败')
              })
              .finally(() => {
                this.confirmLoading = false
              })
          } else {
            // 增加
            addCards(Object.assign(this.form, { school_id: this.$store.state.user.school }))
              .then((res) => {
                this.cardInfo = res
                this.addVisible = false
                this.$message.success('增加成功')
              })
              .catch((err) => {
                this.$message.error(err.data.message || '增加失败')
              })
              .finally(() => {
                this.confirmLoading = false
              })
          }
        } else {
          this.$message.warning('请按正确格式填写')
          return false
        }
      })
    },
    getMonet() {
      getSchoolInfo(this.$store.state.user.school)
        .then((res) => {
          this.money = res.school_surplus
        })
        .catch((err) => {
          this.$message.error(err.data.message || '获取失败')
        })
    },
    onOpenChange(openKeys) {
      this.openKeys = openKeys
    },
    updateMenu() {
      const routes = this.$route.matched.concat()
      this.selectedKeys = [routes.pop().path]
    },
  },
  watch: {
    $route(val) {
      this.updateMenu()
    },
  },
}
</script>

<style lang="less" scoped>
.border-cantainer {
  padding: 0 10px;
  margin-right: 40px;
}
.topDataTitle {
  margin-bottom: 20px;
}
.topDataDisplayFlex {
  display: flex;
  align-items: center;
  .topDataDesc {
    // width: 25%;
    flex: 1;
    // height: 50px;
    // margin-bottom: 20px;
    text-align: center;
    border-right: 1px solid #e8e8e8;
    .topDataDescPrice {
      font-size: 24px;
    }
    .topDataDescText {
      padding-top: 2px;
      font-size: 14px;
      margin-bottom: 15px;
      color: rgb(153, 153, 153);
    }
  }
  .topDataDesc:last-child {
    border-right: none;
  }
}
.my-flex {
  display: flex;
  padding: 10px 0;
}
</style>
